<template>
  <div class="CircleSvg">
    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
      :width="width" :height="width">
      <circle cx="100" cy="100" :r="r"
        fill="none"
        opacity="0.4"
        :stroke="color"
        :stroke-width="border"
      />
      <circle cx="100" cy="100" :r="r"
        fill="none"
        transform="rotate(270,100,100)"
        :stroke="color"
        :stroke-width="border"
        :stroke-dasharray="dashLen"
        :stroke-dashoffset = "dashOffset"/>
      <text x="100" y="100" text-anchor="middle"
        :font-size="fontSize + 5"
        :fill="color">
        {{ this.timeLeft }}s
      </text>
      <text x="100" y="150" text-anchor="middle"
        :font-size="fontSize"
        fill="#d4d4d4">
        剩余
      </text>
    </svg>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'CircleSvg',
  data () {
    return {
      timeLeft: 60,
      r: 100 - this.border / 2,
      dashLen: this.r * Math.PI * 2
    }
  },
  props: {
    setTimer: {
      type: Number
    },
    width: {
      type: Number,
      default: 80
    },
    border: {
      type: Number,
      default: 20
    },
    color: {
      type: String,
      default: '#fcaa55'
    },
    fontSize: {
      type: Number,
      default: 30
    }
  },
  computed: {
    dashOffset () {
      return this.dashLen - this.timeLeft / this.setTimer * this.dashLen
    }
  },
  mounted () {
    this.interval = setInterval(() => {
      this.timeLeft--
      // this.dashLen = (100 - this.border / 2) * ((Math.PI * 2) * (this.timeLeft / 60))
      this.dashLen = (100 - this.border / 2) * ((Math.PI * 2) * (this.timeLeft / 60)) + ' ' + (this.r * Math.PI * 2 - (100 - this.border / 2) * ((Math.PI * 2) * (this.timeLeft / 60)))
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
circle {
  -webkit-transition: all 1s;
  transition: all 1s;
}
</style>
